<template>
	<view class="cate-page">
		<scroll-view scroll-y="true" class="cate-wrap">
			<view>
				<view v-for="(cate, index) in cates" @tap="switchActiveCate(index)" :key="cate.id" :class="['cate', {active: activeIndex===index}]">
					{{cate.name}}
				</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="item-wrap">
			<view class="items">
				<view class="item" v-for="item in items" :key="item.id" @tap="enterDetail(item.id)">
					<image :src="item.pic" mode="scaleToFill"></image>
					<view class="item-info">
						<text class="name">{{item.name}}</text>
						<view class="action">
							<text class="price">{{item.minPrice}}</text>
							<uni-icons type="plus-filled" color="#f66" size="30"></uni-icons>
						</view>
					</view>
				</view>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cates: [],
				items: [],
				activeIndex: 0
			}
		},
		onLoad() {
			this.fetchCates();

		},
		methods: {
			enterDetail(id){
				uni.navigateTo({
					url: "/pages/detail/detail?id="+id
				})
			},
			switchActiveCate(index){
				this.activeIndex = index;
				this.fetchActiveItems()
			},
			fetchCates() {
				this.$request('/shop/goods/category/all').then(res => {
					if (res.code === 0) {
						this.cates = res.data
						this.fetchActiveItems();
					}
				})
			},
			fetchActiveItems() {
				this.$request("/shop/goods/list/v2", {
					method: 'POST',
					data: {
						categoryId: this.cates[this.activeIndex].id
					}
				}).then(res => {
					if (res.code === 0) {
						this.items = res.data.result
					}
					if (res.code === 700) {
						this.items = [];
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cate-page {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: flex;

		.cate-wrap {
			width: 250rpx;
			height: 100%;
			border-right: 1rpx solid #ccc;

			.cate {
				line-height: 40px;
				text-align: center;
				font-size: 14px;
				color: #333;
				background-color: #fff;

				&.active {
					position: relative;
					color: #f66;

					&::after {
						content: "";
						display: block;
						position: absolute;
						left: 0;
						top: 0;
						width: 3px;
						height: 40px;
						background-color: #f66;
					}
				}
			}
		}

		.item-wrap {
			width: 500rpx;
			height: 100%;

			.items {
				.item {
					display: flex;
					align-items: center;

					image {
						width: 180rpx;
						height: 180rpx;
					}

					.item-info {
						flex: 1;
						font-size: 12px;
					}
				}
			}
		}
	}
</style>